import React, { useState } from "react";
import { Button, Tabs } from "antd-mobile";
import "./index.scss";

import { LoopOutline } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
function Home() {
  const navigate = useNavigate();
  const citylis = useSelector((state) => state.citys);
  console.log(citylis);
  const [start, setStart] = useState(citylis.start);
  const [end, setEnd] = useState(citylis.end);

  // 切换
  const huan = () => {
    setStart(end);
    setEnd(start);
  };
  // 点击左边城市
  const left = () => {
    localStorage.setItem("left", "left");
    navigate("/city");
  };

  // 点击右边城市
  const right = () => {
    localStorage.setItem("left", "right");
    navigate("/city");
  };
  // 查询
  const goxq = () => {
navigate('/list')
  };

  // 跳转日期
  const gorq = ()=>{
    navigate('/rq')
  }
  return (
    <div>
      <div>
        <img
          src="https://img1.baidu.com/it/u=4009709461,3177071451&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
          style={{ width: "100%", height: "150px" }}
          alt=""
        />
      </div>
      <Tabs>
        <Tabs.Tab title="船票" key="fruits">

          {/* 开始 */}
          <p
            onClick={() => {
              left();
            }}
          >
            {start}
          </p>
          {/* 切换 */}
          <p
            onClick={() => {
              huan();
            }}
          >
            <LoopOutline />
          </p>
          {/* 结束 */}
          <p
            onClick={() => {
              right();
            }}
          >
            {end}
          </p>
          {/* <br /> */}
          {/* 日期 */}
          <h2 onClick={()=>{gorq()}}>{citylis.date}</h2>
            {/* 查询 */}
          <Button
            block
            color="primary"
            size="large"
            onClick={() => {
              goxq();
            }}
          >
            查询
          </Button>
        </Tabs.Tab>
        <Tabs.Tab title="汽车票" key="vegetables">
          没得
        </Tabs.Tab>
      </Tabs>
    </div>
  );
}

export default Home;
